<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备状态看板</title>
</head>
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>

<!-- dev mock js -->
<script src="../../../node_modules/mockjs/dist/mock-min.js"></script>
<script src="../static/js/mock_config.js"></script>

<!-- 自定义css -->
<link rel="stylesheet" href="../static/css/electronicFont.css?version=1.0">
<link rel="stylesheet" href="../static/css/EqStatus.css?version=1.0">

<script src="../../static/iconfont/iconfont.js"></script>

<style>
    * {
        color: #fff;
    }
    
    body {
        width: 100%;
        height: 100%;
        background-color: #0b0d20;
    }
</style>

<body>
    <div id="app">

        <!-- 头部信息 -->
        <header>
            <div class="navbar">
                <div class="card" style="width: 18rem; background-color: transparent;  border: 0;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>设备总数</h2>
                        </li>
                        <li class="list-group-item pr" style="position: relative;">
                            <h2 id="Ast_EqQty" class="pr" style="top:-18px ;">0</h2>
                            <div style="position: absolute; top: 30px; left: 30px;">
                                <div class="bg_Power legend"></div> <span class="Power"> 开机</span>
                                <div class="bg_Standby legend"></div> <span class="Standby"> 待机</span>
                                <div class="bg_repair legend"></div> <span class="repair">维修 </span>
                                <div class="bg_maintain legend"></div><span class="maintain"> 保养</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card bg_Power" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>开机中 </h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Power">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_Standby" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>待机中</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="WaitQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_repair" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>维修中</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="RepairQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card bg_maintain" style="width: 18rem; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>保养中</h2>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Maintenance">0</h2>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div style="margin-top: 15px; margin-left: 5px; margin-right: 5px;">
            <div v-for="(item,index) in  Datalist_gp" :key="index" style="margin: 3px 2px 15px 5px; ">
                <!-- <h3>{{item[index].SetupAddress}}</h3> -->
                <h3>{{item[0].SetupAddress}}</h3>
                <div class="wrapper">
                    <div class="card" v-for="items in  item" style="width: 8rem; background-color: transparent;">
                        <div class="img" style="text-align: center;">
                            <svg class="icon" aria-hidden="true">
                    <use :xlink:href="items.AsEqStatusico"></use>
                </svg>
                        </div>
                        <div class="text">
                            <span :class="items.AsEqStatus">{{items.AsEqCode}}</span>
                            <!-- <h5>{{items.SetupAddress}}</h5> -->
                            <h5 :class="items.AsEqStatus">{{items.AsEqName}}</h5>
                        </div>
                    </div>
                </div>
                <br>
                <!-- <div v-for="x in item">
                    {{x.SetupAddress}}
                </div> -->
            </div>

        </div>


        <!-- <div id="wrapper" class="wrapper" style="overflow: hidden;height: 800px;">
            <div class="card" v-for="item in  Datalist" :key="Datalist.SetupAddress" style="width: 8rem; background-color: transparent;">
                <div class="img" style="text-align: center;">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.AsEqStatusico"></use>
                    </svg>
                </div>
                <div class="text">
                    <span :class="item.AsEqStatus">{{item.AsEqCode}}/{{item.AsEqName}}</span>
                    <h5>{{item.SetupAddress}}</h5>
                </div>
            </div> 
        </div>-->
</body>
<script>
    function Getdate() {
        // 设备总数
        GetCodeData("VB21061718461828", "Get", "number").then(function(res) {
                $("#Ast_EqQty").text(res.rows[0].Column1)
            }),

            // 待机中
            GetCodeData("VB21061810091286", "Get", "number").then(function(res) {
                $("#WaitQty").text(res.rows[0].Column1)
            })

        // 维修中
        GetCodeData("VB21061810232937", "Get", "number").then(function(res) {
            $("#RepairQty").text(res.rows[0].Column1)
        })

        // 保养中        
        GetCodeData("VB21061810240728", "Get", "number").then(function(res) {
            $("#Maintenance").text(res.rows[0].Column1)
        })

        // 开机中

        GetCodeData("VB21061817464718", "Get", "number").then(function(res) {
            $("#Power").text(res.rows[0].Column1)
        })
    }

    $(
        // 计算可视区域的高度
        $("#wrapper").height($(window).height() - $("header").height()),
        // setTimeout(function() {
        //     Autoscroll($("#wrapper")[0], 100, false)
        // }, 1000),
        setTimeout(function() {
            Getdate()
        }, 0),
        setInterval(function() {
            Getdate()
        }, 1000*60)
    );

    new Vue({
        el: '#app',
        data() {
            return {
                Datalist: [],
                Datalist_gp: []

            }
        },
        mounted() {
            var that = this
            setTimeout(function() {
                GetCodeData('VB21061809535860', "get", "EquipmentDt").then(function(res) {
                    that.Datalist = res.rows
                    that.Datalist_gp = groupBy(res.rows, "SetupAddress") 
                })
            }, 0);
            setInterval(function() {
                GetCodeData('VB21061809535860', "get", "EquipmentDt").then(function(res) {
                    that.Datalist = res.rows
                    that.Datalist_gp = groupBy(res.rows, "SetupAddress") 
                })
            }, 1000*60);
        }
    })
</script>

</html>